<template>
	<view class="container">
		<cu-custom bgColor="bg-gray" :isBack="true">
			<block v-slot:backText>返回</block>
			<block v-slot:content>优惠券</block>
		</cu-custom>
		<view class="bg"></view>
		<view class="main">
			<view class="userinfo">
				<image v-if="setting.coupon.shopLogo&&setting.coupon.shopLogo.length>0" class="avatar" :src="setting.coupon.shopLogo"></image>
				<image v-else class="avatar" src="/static/logo.jpg"></image>
				<view class="username">{{setting.coupon.shopName}}</view>
				<view class="desc">有效期至：{{setting.coupon.startTime}}~{{setting.coupon.endTime}}</view>
			</view>
			<view class="code-section padding">
	
				<canvas canvas-id="memberCode" style="width: 600rpx; height: 600rpx;"></canvas>
				<!-- qrcode end -->
				<!-- <view class="cu-line"></view>
				<view class="tips margin-top-sm">没时间消费?那不如送给好友吧</view>
				<view style="width: 100%;" class=" padding flex flex-direction">
					<button class="cu-btn round bg-gradual-orange2 lg">赠送好友</button>

				</view> -->
				<view class="cu-line"></view>
				<view class="padding" style="width: 100%;">
					<view class="text-size-14 text-gray">使用说明:</view>
					<view class="text-size-14 text-gray">
						{{setting.coupon.description}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import cuCustom from '@/components/cu-custom.vue';
	import uQRCode from '@/common/uqrcode';
	import { onShow, onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { useSettingStore } from '@/stores/index';
	const setting = useSettingStore();
	const makeMemberCode = (code : any) => {
		uQRCode.make({
			canvasId: 'memberCode',
			componentInstance: this,
			text: `${code}`,
			size: uni.upx2px(600),
			margin: 20,
			backgroundColor: '#ffffff',
			foregroundColor: '#000000',
			fileType: 'jpg',
			correctLevel: uQRCode.defaults.correctLevel,
			success: res => { }
		});
	}
	onShow(() => {
		console.log(setting.coupon)
		makeMemberCode(setting.coupon.code);
		setInterval(() => {
			makeMemberCode(setting.coupon.code);
		}, 30000);
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
	}

	.bg {
		background-color: #424141;
		height: 10vh;
		/* #ifdef H5 */
		height: calc(10vh - 44px);
		/* #endif */
	}

	.bg-gray {
		background-color: #424141;
		color: #ffffff;
	}

	.main {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.6);

		.avatar {
			position: relative;
			width: 140rpx;
			height: 140rpx;
			border-radius: 100%;
			margin-top: -70rpx;
			margin-bottom: 20rpx;
		}

		.username {
			font-size: $font-size-extra-lg;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.desc {
			font-size: $font-size-sm;
			color: $text-color-assist;
			margin-bottom: 20rpx;
		}
	}

	.code-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-size-base;
		color: $font-size-base;

		.tips {
			font-size: $font-size-sm;
			color: $text-color-assist;
		}
	}
</style>